<!--
- Author:   .
- Date:    2018/1/11 0011.
- File:    balance.
-->
<template>
  <div class="Web_Box">
    <div class="DistributionOrder"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <div class="present">
        <div class="inter_tab" v-for="history in historyList.data"><a>
          <div class="timess f-cb">{{history.addtime | timestampToDate('yyyy-MM-dd hh:mm:ss')}}
            <span class="cr_03bf10" v-show="history.fb_value.indexOf('-') < 0">+{{history.fb_value}}</span>
            <span class="cr_fd6847" v-show="history.fb_value.indexOf('-') != -1">{{history.fb_value}}</span>
          </div>
          <table width="100%" border="0">
            <tbody>
              <tr>
                <td colspan="2">操作单号：{{history.code}}</td>
              </tr>
              <tr>
                <td colspan="2">说明：{{history.remark}}</td>
              </tr>
            </tbody>
          </table>
        </a></div>
      </div>
    </div>
    <loading-more :allLoaded="historyList.allLoaded" :show="historyList.data.length > 0"></loading-more>
    <empty-data :show="historyList.allLoaded && historyList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import DatetimePicker from '../../../components/monthPicker'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: ['memberInfo']})
    ],
    data() {
      return {
        type: this.$dictionary.balanceDirect.in,
        integralType: this.$route.query.type,
        historyList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        currentDate: new Date(),
        selectMonth: '',
        selectUserLv: ''
      }
    },
    components: {
      'datetime-picker': DatetimePicker
    },
    created() {
      this.initBalanceHistory()
    },
    computed: {},
    watch: {
      $route () {
        this.type = this.$route.query.type
        this.initBalanceHistory()
      },
      selectUserLv: function (value) {
        this.selectUserLv = value
        this.initBalanceHistory()
      }
    },
    methods: {
      gotoOrderDetail(history) {
        if (history.type == 7) {
          this.$router.push({name: 'order-detail', params: {id: history.order_id}, query: {self: 'false'}})
        }
      },
      switchType(value) {
        this.$router.replace({name: 'balance-bill', query: {type: value}})
      },
      openDatePicker() {
        this.$refs.datePicker.open()
      },

      handleDateChange(value) {
        let date = new Date(value)
        let dateStr = this.$utils.formatDate(date, 'yyyy-MM-dd')
        this.selectMonth = dateStr
        console.log(dateStr)
        this.initBalanceHistory()
      },
      initBalanceHistory() {
        this.historyList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getBalanceHistory(this.historyList.page, this.historyList.pageSize)
      },
      getBalanceHistory(page, pageSize) {
        this.historyList.loading = true
        this.$request.getIntegralOtherList(page, pageSize, this.integralType).then(data => {
          if (data.length < this.historyList.pageSize) {
            this.historyList.allLoaded = true
          }
          this.historyList.data = [...this.historyList.data, ...data]
        }).finally(() => {
          this.historyList.requested = true
          this.historyList.loading = false
        })
      },
      loadMore() {
        if (this.historyList.loading || this.historyList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getBalanceHistory(++this.historyList.page, this.historyList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>

<style>

</style>